<template>
  <div class="resource">
    <el-table
      stripe
      :data="resourceDTOList"
      row-key="id"
      border
      :header-cell-style="{ textAlign: 'center' }"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="resourceName" label="名称"> </el-table-column>
      <el-table-column prop="url" label="路径"> </el-table-column>
      <el-table-column prop="requestMethod" label="请求方式">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.requestMethod === 'DELETE'">{{
            scope.row.requestMethod
          }}</el-tag>
          <el-tag type="success" v-if="scope.row.requestMethod === 'GET'">{{
            scope.row.requestMethod
          }}</el-tag>
          <el-tag type="info" v-if="scope.row.requestMethod === 'POST'">{{
            scope.row.requestMethod
          }}</el-tag>
          <el-tag type="waring" v-if="scope.row.requestMethod === 'PUT'">{{
            scope.row.requestMethod
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isAnonymous" label="匿名访问">
        <template slot-scope="scope">
          <el-switch
            v-if="scope.row.parentId"
            v-model="scope.row.isAnonymous"
            @change="updateIsAnonymous($event, scope.row.id)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resourceDTOList: [],
    };
  },
  methods: {
    init() {
      this.getRequest("/api/resource/admin/list").then((res) => {
        this.resourceDTOList = res.data;
      });
    },
    updateIsAnonymous(event, id) {
      let params = {
        id: id,
        isAnonymous: event,
      };
      this.putRequest("/api/resource/admin/update", params).then((res) => {
        if (res.flag) {
          this.$message.success("修改成功");
          this.init();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>
.resource {
  margin: 20px;
  
}
</style>